import * as echarts from "echarts";
import { useEffect, useRef } from "react";
export default function BarChart({title='柱状图'}) {
  const chart = useRef();
  useEffect(() => {
    const chartInstance = echarts.init(chart.current);
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["vue", "react", "angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [10, 40, 70],
          type: "bar",
        },
      ],
    };
    chartInstance.setOption(option);
  }, []);
  return (
    <div>
      <div ref={chart} style={{ width: "500px", height: "400px" }}></div>
    </div>
  );
}
